<template>
	<view class="wrapper">
		<custom-nav-bar :opacityVal="opacityVal" :titleName="'全场记录'" :titleColor="'#fff'" :showBackBtn="true"></custom-nav-bar>
		<view class="top-bg" :style="{top: customBar + 'px'}"></view>
		<view class="main-content" :style="[{top: customBar + 'px', height: `calc(100vh - ${customBar}px - 30px)`}]">
			<view class="full-field-box">
				<view class="top">
					<view class="date">2024/07/03更新</view>
				</view>
				<view class="ceneter">
					<view class="left-player">
						<image src="../../static/logo.png" mode="aspectFill" class="avatar"></image>
						<view class="player">丁俊晖</view>
					</view>
					<view class="vs">
						<view class="top">
							<span class="left-span">56%</span>
							<span class="ceneter-span">vs</span>
							<span class="right-span">44%</span>
						</view>
						<view class="bottom">胜率</view>
					</view>
					<view class="right-player">
						<image src="../../static/logo.png" mode="aspectFill" class="avatar"></image>
						<view class="player">特鲁姆普</view>
					</view>
				</view>
				<view class="bottom">
					<view class="bar">
						<view class="left-player">14胜</view>
						<view class="right-player">13胜</view>
					</view>
				</view>
			</view>
			<view class="tab-bar">
				<view class="left" :class="{'active': tabIndex == 0}" @click="switchTabBar(0)">交手场次</view>
				<view class="right" :class="{'active': tabIndex == 1}" @click="switchTabBar(1)">技术统计</view>
			</view>
			<scroll-view scroll-y="true" class="details-content-view">
			    <view class="details-content-box">
					<view class="battle-situation-list" v-if="tabIndex == 0">
						<view class="battle-situation-item" v-for="(item, index) in battleSituationList" :key="index" @click="toSingleFieldRecord()">
							<view class="top-bar">
								<view class="left">
									<text>{{item.session}}</text>
								</view>
								<view class="center">{{item.playLength}}</view>
								<view class="right">{{item.date}}</view>
							</view>
							<view class="center-info">
								<view class="left">
									<image :src="item.leftPlayerAvatar" mode="aspectFit" class="avatar"></image>
									<view class="player-name">{{item.leftPlayerName}}</view>
									<view class="win-value">{{item.leftPlayerWins}}胜</view>
								</view>
								<view class="center">
									<view class="top-rate">
										<view class="left-rate">{{item.leftPlayerRate}}</view>
										<image src="../../static/images/data-vs.png" mode="aspectFit" class="center-vs"></image>
										<view class="right-rate">{{item.rightPlayerRate}}</view>
									</view>
									<view class="bottom-btn">
										<view class="playback btn" @click.stop="toPlayback()">视频回放</view>
										<view class="grade btn" @click.stop="toGradePrompt()">对战评级</view> 
									</view>
								</view>
								<view class="right">
									<image :src="item.leftPlayerAvatar" mode="widthFix" class="avatar"></image>
									<view class="player-name">{{item.leftPlayerName}}</view>
									<view class="win-value">{{item.leftPlayerWins}}胜</view>
								</view>
							</view>
						</view>
					</view>
					<view class="details-list" v-if="tabIndex == 1">
						<view class="details-item" v-for="(item, index) in 30" :key="index" @click="toSingleFieldRecord()">技术统计</view>
					</view>
			    </view>
			</scroll-view>
		</view>
		<uni-popup type="center" ref="gradePrompt">
			<view class="grade-box">
				<view class="title">本场评级</view>
				<view class="tips">
					确定
				</view>
			</view>
			<view class="prompt-close">
			    <image src="../../static/images/prompt-close.png" mode="aspectFit" class="prompt-close-img" @click="closeGradePromptPop()"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import customNavBar from "@/components/custom-nav-bar.vue";
	export default {
		data() {
			const customBar	= uni.getStorageSync('CustomBar');
			return {
				customBar,
				opacityVal: '#2f96f7',
				tabIndex: 0,
				battleSituationList: [{
					session: '第一场',
					playLength: '2小时',
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 15,
					leftPlayerRate: '6',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '特鲁姆普',
					rightPlayerWins: 4,
					rightPlayerRate: '3'
				},{
					session: '第一场',
					playLength: '2小时',
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 20,
					leftPlayerRate: '9',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '特鲁姆普',
					rightPlayerWins: 1,
					rightPlayerRate: '5'
				},{
					session: '第一场',
					playLength: '2小时',
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 8,
					leftPlayerRate: '3',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '丁俊晖',
					rightPlayerWins: 19,
					rightPlayerRate: '6'
				},{
					session: '第一场',
					playLength: '2小时',
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 8,
					leftPlayerRate: '3',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '丁俊晖',
					rightPlayerWins: 19,
					rightPlayerRate: '6'
				},{
					session: '第一场',
					playLength: '2小时',
					date: '2024/07/03',
					leftPlayerAvatar: '../../static/images/data-left-player.png',
					leftPlayerName: '丁俊晖',
					leftPlayerWins: 8,
					leftPlayerRate: '3',
					rightPlayerAvatar: '../../static/images/data-right-player.png',
					rightPlayerName: '丁俊晖',
					rightPlayerWins: 19,
					rightPlayerRate: '6'
				}],
			}
		},
		components: {
			customNavBar,
		},
		methods: {
			switchTabBar(index) {
				this.tabIndex = index;
			},
			toSingleFieldRecord() {
				uni.navigateTo({
					url: '/pages/dataInformation/singleFieldRecord'
				});
			},
			toGradePrompt() {
				this.$refs.gradePrompt.open();
			},
			toPlayback() {
				uni.navigateTo({ //跳转到视频回放
					url: `./singleFieldRecord?tabIndex=1`
				});
			},
			closeGradePromptPop() {
				this.$refs.gradePrompt.close();
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
		.grade-box{
			width: 70vw;
			background: #fff;
			border-radius: 20upx;
			padding: 20upx;
			.title{
				text-align: center;
				color: #2f96f7;
			}
			.tips{
				padding: 30upx 0;
				color: #666;
				text-align: center;
			}
		}
		.prompt-close{
			margin-top: 40upx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.prompt-close-img{
				width: 50upx;
				height: 50upx;
			}
		}
		.top-bg{
			position: fixed;
			width: 100vw;
			height: 300upx;
			background: $main-color;
			border-radius: 0 0 50upx 50upx;
		}
		.main-content{
			position: relative;
			display: flex;
			flex-direction: column;
			padding: 30upx;
			.full-field-box{
				background: #fff;
				border-radius: 30upx;
				display: flex;
				flex-direction: column;
				.top{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 4vh;
					padding: 0 10upx;
					.date{
						font-size: 24upx;
						color: #999;
					}
				}
				.ceneter{
					height: 12vh;
					display: flex;
					justify-content: space-around;
					align-items: center;
					.left-player,.right-player{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.avatar{
							width: 100upx;
							height: 100upx;
							border-radius: 100upx;
						}
						.player{
							margin-top: 10upx;
						}
					}
					.vs{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.top{
							display: flex;
							flex-direction: row;
							.left-span,.right-span{
								font-size: 46upx;
							}
							.ceneter-span{
								font-size: 36upx;
								margin: 0 10upx;
							
							}
						}
						.bottom{
							color: #999;
						}
					}
				}
				.bottom{
					height: 4vh;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					padding: 0 20upx;
					.bar{
						width: 100%;
						height: 35upx;
						border-radius: 35upx;
						display: flex;
						flex-direction: row;
						font-size: 22upx;
						color: #fff;
						overflow: hidden;
						.left-player{
							flex: 14;
							background: #7ed2fc;
							padding-left: 20upx;
						}
						.right-player{
							flex: 12;
							background: #ecd531;
							padding-right: 20upx;
							text-align: right;
						}
					}
					
				}
			}
			.tab-bar{
				height: 7vh;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 40upx;
				.left,.right{
					color: #999;
					font-weight: 600;
				}
				.active{
					color: #2f96f7;
				}
			}
			.details-content-view{
				height: calc(100% - 20vh - 7vh);
				.details-content-box{
					.details-list{
						.details-item{
							background: #09f;
							margin: 20upx 0;
							border-radius: 20upx;
							padding: 20upx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.battle-situation-list{
						padding: 20upx 0 0;
						.battle-situation-item{
							background: #fff;
							border-radius: 20upx;
							margin-bottom: 20upx;
							padding: 0 20upx;
							.top-bar{
								display: flex;
								justify-content: space-between;
								align-items: center;
								position: relative;
								.left{
									flex: 1;
									display: flex;
									justify-content: flex-start;
									align-items: center;
									text{
										color: $green-color;
										font-size: 22upx;
										font-weight: 600;
									}
								}
								.center{
									background: $main-color;
									border-radius: 0 0 18upx 18upx;
									font-size: 22upx;
									color: #fff;
									padding: 4upx 25upx;
								}
								.right{
									flex: 1;
									display: flex;
									justify-content: flex-end;
									color: $gray-color;
									font-size: 24upx;
								}
							}
							.center-info{
								padding: 16upx;
								display: flex;
								justify-content: space-between;
								.left,.right{
									display: flex;
									flex-direction: column;
									align-items: center;
									.avatar{
										margin-top: 10upx;
										width: 80upx;
										height: 80upx;
										border-radius: 80upx;
									}
									.player-name{
										color: $black-color;
										font-weight: 600;
										margin: 10upx 0;
									}
									.win-value{
										color: $main-color;
										font-size: 24upx;
										font-weight: 600;
									}
								}
								.center{
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									.top-rate{
										display: flex;
										align-items: center;
										.left-rate{
											font-size: 46upx;
											font-weight: bold;
											color: $green-color;
										}
										.center-vs{
											width: 70upx;
											height: 100upx;
											margin: 0 50upx;
										}
										.right-rate{
											font-size: 46upx;
											font-weight: bold;
											color: $black-color;
										}
									}
									.bottom-btn{
										width: 100%;
										display: flex;
										margin-bottom: 10upx;
										.btn{
											padding: 0 20upx;
											height: 46upx;
											line-height: 46upx;
											border-radius: 40upx;
											color: #fff;
											font-size: 26upx;
										}
										.playback{
											background: $main-color;
											margin-right: 20upx;
										}
										.grade{
											background: $yellow-color;
										}
									}
								}
							}
						}
					}
					
				}
			}
		}
	}

</style>
